
    
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start"></div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end"></div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" name="nickname" placeholder="请输入用户名" autocomplete="off" id="nickname" class="layui-input"></div>
                                <div class="layui-inline layui-show-xs-block">
                                    <a class="layui-btn" id="btn">
                                        <i class="layui-icon">&#xe615;</i></a>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-body ">
                            <table class="layui-hide" id="userlist" lay-filter="userlist"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </script>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="stop">{{ d.status=='禁用' ? '启用' : '禁用' }}</a>
    </script>
    <script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
    <script>
        layui.use(['laydate','table'],function() {
            
            var laydate = layui.laydate;
            var table = layui.table;



            table.render({
                elem: '#userlist'
                ,url:'{:url('admin/user/ajax_list')}'
                ,limit:2
                ,page: true
                ,toolbar: '#toolbarDemo'
                ,id:'userlist'
                ,cols: [[
                  {field:'user_id', title: 'ID', sort: true}
                  ,{field:'nickname', title: '用户名'}
                  ,{field:'sex', title: '性别'}
                  ,{field:'phone', title: '手机'}
                  ,{field:'city', title: '城市',edit: 'text'}
                  ,{field:'email', title: '邮箱'}
                  ,{field:'status', title: '状态'}
                  ,{title:'操作', toolbar: '#barDemo',width:220}
                ]]
              });


            table.on('tool(userlist)', function(obj){

                if(obj.event=='del'){

                    $.post('{:url('admin/user/del')}', {user_id: obj.data.user_id}, function(data, textStatus, xhr) {
                        
                    });
                }else if(obj.event=='edit'){
                    xadmin.open('修改用户','{:url('admin/user/edit')}'+"?user_id="+obj.data.user_id)
                }else if(obj.event=='stop'){
                    $.post('{:url('admin/user/stop')}', {user_id: obj.data.user_id}, function(data, textStatus, xhr) {
                        if(data.code==1){
                            layer.msg('禁用成功',function(){

                            })
                            $('#btn').click();
                        }else{
                            layer.msg(data.msg,function(){})  
                        }
                    });
                }
            
            });


            //监听单元格编辑
              table.on('edit(userlist)', function(obj){

                console.log(obj);
                $.post('/path/to/file', {user_id:obj.data.user_id,value:obj.value,field:obj.field}, function(data, textStatus, xhr) {
                    /*optional stuff to do after success */
                });
              });


            $('#btn').click(function(event) {
                var nickname = $('#nickname').val();
                var start = $('#start').val();
                var end = $('#end').val();


                  table.reload('userlist', {
                    page: {
                      curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                      nickname:nickname,
                      start:start,
                      end:end,
                    }
                  });
            });



          

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });

        });
    </script>
    <script>layui.use('table',
        function() {
            var table = layui.table;

            //监听单元格编辑
            table.on('edit(test)',
            function(obj) {
                var value = obj.value //得到修改后的值
                ,
                data = obj.data //得到所在行所有键值
                ,
                field = obj.field; //得到字段
                layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
            });

            //头工具栏事件
            table.on('toolbar(test)',
            function(obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                };
            });
        });</script>
    <script>var _hmt = _hmt || []; (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();</script>

</html>